<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.left_img{
				float:left;
				width:38px;
				height:38px;
			}
			.right_img{
				float:right;
				width:38px;
				height:38px;
			}
			#msg-list {
				overflow: scroll !important;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			footer{
				position: fixed;
				left: 0px;
				bottom: 0px;
				width: 100%;
				height:50px;
				min-height: 50px;
				max-height: 250px;
				border-top: solid 1px #bbb;
				overflow: hidden;
				padding: 5px 80px 5px 20px;
				background-color: #fafafa;
			}
			.input-text{
				width:100%;
				height:100%;
				overflow: hidden;
			}
			.sendmsg{
				position:fixed !important;
				bottom:5px !important;
				right:5px !important;
				background-color: #09a267 !important;
				color:#fff !important;
				height: 40px;
				width: 60px;
			}
		</style>
	</head>
	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: linear-gradient(#9191ea,#fff);">
			<span id="back" class="mui-icon mui-icon-back mui-pull-left"></span>
			<h1 class="mui-title" id="Tosend_user"></h1>
		</div>
		<div class="mui-content">
			<div id="date" style="text-align: center;padding:10px 0;font-size: 15px;"></div>
			<div id="msg-list">
				<!-- 左边聊天框
				<div class="msg-item">
					<img class="left_img" src="../images/logo.png" onerror="this.onerror='';src='../images/person.png' " alt="头像">
					<div class="msg-content">
						<div class="msg-content-inner">你好啊！今天天气真好，我们去郊游吧！</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div> -->
				<!-- 右边聊天框
				<div class="msg-item  msg-item-self">
					<img class="right_img" src="../images/logo.png" onerror="this.onerror='';src='../images/person.png' " alt="头像">
					<div class="msg-content">
						<div class="msg-content-inner">好啊好啊好啊好啊</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div> -->
			</div>
		</div>
		<footer>
			<textarea id="msg_text" type="text" class="input-text"></textarea>
			<input type="button" id="send" class="sendmsg" value="发送"/>
		</footer>
	</body>
	<script src="../jquery.mobile-1.4.5/jquery-1.8.3.min.js"></script>
	<script src="../js/ajax.js"></script>
	<script src="../js/conf.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/send_msg.js"></script>
	<script>
		mui.init();
		$("#back").on("click",function(){
			mui.back();
		});
		$("#msg-list").height($(window).height()-135);
		var userId;//发布评论的用户id
		mui.plusReady(function() {
			userId = plus.navigator.getCookie( "id");
		});
		// oninput="autoTextAreaHeight(this)"文本框调用
		function autoTextAreaHeight(o){
			o.style.height = o.scrollTop + o.scrollHeight + "px";
		}
	</script>
</html>
